<template>
  <!-- 头部 -->
  <v-app-bar
    app
    color="white"
    flat
    style="background-image: linear-gradient(to right, #87ceeb, #00bfff)"
    v-if="winWidth > 570"
  >
    <v-container class="py-0 fill-height">
      <v-avatar class="mr-10" color="grey darken-1" size="32">
        <img
          src="../../assets/img/20230815224830.jpg"
          alt=""
          style="width: 32px"
        />
      </v-avatar>

      <v-btn v-for="link in links" :key="link" text>
        {{ link }}
      </v-btn>
    </v-container>
  </v-app-bar>
  <v-app-bar elevation="4" dense flat color="blue" v-else>
    <v-btn class="mx-2" fab dark color="#ffffff">
      <v-icon dark> mdi-format-list-bulleted-square </v-icon>
    </v-btn>
  </v-app-bar>
</template>

<script setup>
import { watch, ref, onMounted } from 'vue'
let links = ['Dashboard', 'Messages', 'Profile', 'Updates']
let winWidth = ref()
window.onresize = function () {
  // console.log('浏览器窗口大小已更改：')
  // console.log('宽度：' + window.innerWidth)
  // console.log('高度：' + window.innerHeight)
  winWidth.value = window.innerWidth
}

onMounted(() => {
  winWidth.value = window.innerWidth
})
</script>
